@use 'sass:math';
@use '../../../token/colors' as colors;
@use '../button-main/button-main' as button-main;
@use '../../../token/size' as size;

$jhlite-button-switch-padding: math.div(5, 16) * 1rem math.div(15, 16) * 1rem;
$jhlite-button-switch-color-text-light: colors.$jhlite-global-color-text-light;
$jhlite-button-switch-radius: size.$jhlite-global-size-switch-radius;
$jhlite-button-switch-font-size: math.div(13, 16) * 1rem;

.jhlite-button-switch {
  @extend %jhlite-button-main;

  border-radius: $jhlite-button-switch-radius;
  background-color: transparent;
  padding: $jhlite-button-switch-padding;
  text-transform: none;
  color: var(--jhlite-global-color-text);
  font-size: $jhlite-button-switch-font-size;

  &:hover {
    background-color: transparent;
  }

  &.-selected {
    background-color: button-main.$jhlite-button-hover-color-background;
    color: $jhlite-button-switch-color-text-light;
  }
}
